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Please leave a message or twitter @unbug for further enquiries. Any help will be 
appreciated :) 


Created by @unbug: 


e MIHTool - ¡OS Web Debugger Pro: MIHTool helps Front-End Engineers to 
debug and optimize their webpages on iPad and iPhone. 

e Codelf- E #4 47" 4: Organize your GitHub stars and repositories.Search 
over projects from GitHub to find real-world usage variable names. 

e js-middleware: Powerful Javascript Middleware Pattern implementation, apply 
middleweares to any object. A painless solution to make codes as scalable 
and maintainable as ReduxJS and ExpressJS. 

e SAY NO TO SUICIDE PUBLIC LICENSE: We've lost so many genius 
developers, who commiitted suicide, such as Aaron Hillel Swartz (November 
8, 1986 — January 11, 2013). As a developer, the community needs you, the 
world needs you, please keep yourself alive. 


1 First look 


1 First Look 


Introducing React Native 


What we really want is the user experience of the native mobile platforms, 
combined with the developer experience we have when building with React 
on the web. With a bit of work, we can make it so the exact same React that's 
on GitHub can power truly native mobile applications. The only difference in 
the mobile environment is that instead of running React in the browser and 
rendering to divs and spans, we run it an embedded instance of 
JavaScriptCore inside our apps and render to higher-level platform-specific 
components. It's worth noting that we're not chasing "write once, run 
anywhere.” Different platforms have different looks, feels, and capabilities, 
and as such, we should still be developing discrete apps for each platform, 
but the same set of engineers should be able to build applications for 
whatever platform they choose, without needing to learn a fundamentally 
different set of technologies for each. We call this approach “learn once, 
write anywhere.” 
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Facebook Groups Facebook Ads AIGA Design Discord 


Showcase 


By Facebook Manager ¡OS - Android Conference 2015 By Hammer & Chisel 
iOS - Android By Facebook By W&Co 
By Recebook Blog posts: 1 2 3 4 
Blog posts: 1 2 3 
Discovery a 7] 
r costa | 
Discovery VR Exponent Helium list Lrn 


iOS - Android ¡OS - Android By Helium By li.st + Exponent By Lrn Labs, Inc 


By Discovery By Exponent 
Communications 


1.1 Building an app in 5 minutes 


Requirement follow Getting Started 
2. Generate a new React Native project 


react-native init testRn 


3. Build & run project 


react-native run-ios 


or open testRn/ios/testRn.xcodeproj and build with XCode's play 
button 





Ar n ) Gb iP! à = 
Z Ba È testRr Carrier F 12:14 PM = | 
v [E testRn Oo General Capabilities Resource Tags Info Build Settings 
> E testRn 
PROJECT “ 
> EJ Libraries Y Identity 
> [7 testRnTests B testan 
> [M Products © © © © unbug — React Packager — node + launchPackager.command — 80x24 ie testa 
= — React Packager — node « launchPackager.command 
E 
[Hot Module Replacement] Server listening on /hot 
React packager ready. 
Welcome to React Native! 
To get started, edit index.ios.js 
Press Cmd+R to reload, 
Cmd+D or shake for dev menu 
transformed 606/606 (100%) 
) 
| 
O) W App Icons and Launch Images 
» 
Ttid:com. fact 
application ' 
{"rootTag":1, 
=== true, der 
performance ¢ 
5] 
+ © DE | Auto > © All Output © ilong e 


or if the app already builded, start the webserver 


npm start 
//or 
react-native start 


1.1 Building an app in 5 minutes 


1.2 How it works 


1.2 How it works 


1.JavaScript bridge 


React Component 
render: function() { 
return <div>Hi!</div>; 


) 


React Component 

render: function() { 
return <View>Hi!</View>; 

} 





2.React Native Packager 


React Native 


Knows how to turn javascript 
components into IOS widgets 


Declares "components", A ReactNative renders our 
instructions on how widgets R N Pó javascript components to the 
should look and act i t i weekdaysxcodeproj | == 


device 
Bundles up all of our custom 


Pada code Includes ReactNative 
ReactNative JS generates a bundle of code 
k 


Knows how to translate our 
component definitions into 
definitions readable by 
ReactNative 
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1.3 Debug tools 


1.developer menu 


© iPhone 6 - iPhone 6 / iOS 9.3 (13E230) 





Reload 


Disable Remote JS Debugging 


Disable Live Reload 


Start Systrace 


Enable Hot Reloading 


Show Inspector 


Show Perf Monitor 


Cancel 


Find Clothes Wardrabe Explore 


2.Chrome Devtools 


1.3 Debug tools 


eee 
R A] 
Sources | Content scripts Snippets E 
YO top 





i debugger-ui 
É debuggerWorkerjs 
© localhost:8081 
Y EB Users/unbug/WebSpace/Mozat/dejafrea 
> [M node modules 
v M src 
> BM actions 
> [m components 
> [m constants 
v [M containers 
E Apis 
E Broswerviewjs 


Elements Console Sources Network Timeline Profiles Resources Security Audits 





Developer Tools - http://localhost:8081/debugger-ui 
PageSpeed 
































4] debugger-ui MainTabsView.ios.js waming.js MainTabsView.ios.js x | > > 
O Serving from the file system? Add your files into the workspace. more never show X 
5| import { 
6 StyleSheet, à 
7, TabBarlos, | 
8, Dimensions, | 
9 View, | 
10; Text 
11 ) from 'react-native'; 
12 import HomeView from './HomeView'; 
13| import Actions from '../actions'; 
14 let (height, width} = Dimensions.get('window'); | 


clas extends Component { 


dleSwitch 
console. lo a 


ons.switchMainTab( ii 









(idx)=>{ idx = 0 
dleSwitchTab'); 








x); 






ender() { 
const { navigator, tab } = this.props; 














p, + t | væ OND async 
Pause On Caught Exceptions 
A 
Main 
debuggerWorker.js paused 
> Watch + 0 
v Call Stack 
MainTabsView.ios.js:18 


~Component.MainTabsView._this.handleSwitchTab 


onPress MainTabsView.ios.js:33 
invokeGuardedCallback ReactErrorUtils.js:26 
executeDispatch EventPluginUtils.js:87 
executeDispatchesinOrder EventPluginUtils.js:110 
executeDispatchesAndRelease EventPluginHub.¡s:42 


executeDispatchesAndReleaseTopL EventPluginHub.js:53 


24 return ( evel 
E HomeViewjs 25 <TabBar10S i 
É ino D a re 
> [M reducers 28 style={styles.container}> processE vere queja tabi a sled i | 
> Bu statics/img 29 <TabBarI0S.Item | runEventQueuelnBatch ReactEventEmitterMixin.js:18 
> Ba store E] ad handleTopLevel ReactEventEmitterMixin.js:29 
E nos 32 sclecter {tap = fe AA (anonymous function) ReactNativeEventEmitter.js:125 
33 onPress=f()=> this.handleSwitchTa Sz 
E index.iosjs 34 icon=frequire( '../components/main-tabs-view/img/finó-clothes_ic | Perform Transaction js:136 
[E debuggerWorker;s = feni] pay op tormtnavigntortte batchedUpdates ReactDefaultBat...Strategy.js:63 
É </TabBar10S.Item> é 
|” index.los.bundle?platform=los8 A 37 <TabBar105. Item batchedUpdates ReactUpdates.js:98 
É roquire-0js a pina psi i JeceiveRootNodelDEvent ReactNativeEventEmitter.js:124 
E require-183j6 40 onPress=f()=> this.handleSwitchTab(1)) receiveEvent ReactNativeEventEmitter.js:138 
rs 41 icon=(require('../components/main-tabs-view/img/wardrobe icon.p callFunction MessageQueue.js:185 
42 <View style={styles.itemView}> = n Fon 
43 <Text>Wardrobe is coming soon...</Text> (anonymous function) MessageQueue js:92 
44 </View> js: 
45 </TabBarl0S. Item> AB Messagatquello se 
46 <TabBar10S.Item callFunctionReturnFlushedQueue  MessageQueue js:91 
NE "Ce onmessage debuggerWorker.js:39 
rx ay x Scope 
= | TY Line18, Column1 Tren 











handleSwitchTab 


3.log 


C Preserve log €2 Show all messages 


console.log('some text'); 


console.dir(fa:1, b:2, c 


:34); 


debugger;//breaking point 


4.Atom 8 nuclide 


MainTabsView.ios.js:17 
MainTabsView. ios.js:17 
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Window Help 
ADB Logcat 
Build 
Clang 
Clipboard Helpers 
Debugger 
Beaker 
Diagnostics 
Source Control 
Toggle Distraction Free Mode 
File Tree > 
Find References X0388F 
Flow > 
Settings... TE, 
iOS Simulator Logs 
Navigation Stack 


jace/Mozat/deja-react-natir 






> 
b 
> 
> 
> 
Ie 
> 
> 





Outline View 

Quick Open (Omnisearch) 38 T 

React Native Start Debugging 
Remote Projects Start Packager 
Kill Nuclide Server and Restart Stop Packager 
Side Bar Restart Packager 


Test Runner 
Type Coverage 
Working Sets 


5.inspect 


Open Atom Command Palette package with cmd-shift-p and search 
"inspector", then click "Nuclide React Native Inspector:Show" 


inspector 


Nuclide React Native Inspector: Hide 


Native Inspector: Show 


t Native Inspector: Toggle 





E3 React Native inspector — ¡USers/unDug/vweb>pace¡mozat/aeja-reaci-native 


React Native Inspector [O © © iPhone 6 - iPhone 6 / iOS 9.3(13E230) | 


Trace React updates <RCTView> ($r in the console) 


tainer rootTag=1> Props read-only 
85 »children: Array [2] 


inspect Perf Touchabies 


y style: 9 
col lapsibt e=false style=85> 
ew collapsible=false style=85> 
ot rootTag=1> i React Native Style Editor 
v <Provider store={dispatch: dispatch(), subscribe: subscribe(), g 


+ <App> - DEJA 


y <Navigator initialRoute=fname: "main tabs view") renderScene= flexDirection : row 


. 
<V > PA [88 ,n pb ls a justifyContent : space-between Fl nd ( ‘lothes 
y <Vi onStartShouldSetResponder=onStartShouldSet 
E ŻE Tak o FM 


alignitems : center 
w style=32 onStartShouldSetResponder=onStartShou 
tartShouldSetResponderCapture=onStartShouldSe paddingLeft : 79 
w onStartShouldSetResponderCapture=onStartSho 
y <Connect (MainTabsView) navigator=Constructorf..) tat paddingRight :79 


y MainTabsView navigator=Comstructor(-) tab=8 act 
= eric padł i z aus paddingBottom :140 


‘styl le=16 title="Find C 
m ="Find Clothes" selecte: 
ainer shouldUpdate=true> 
v <Connect(HomeView) navigator=Constructor 
v <HomeView navigator=Constructor{..} acti 
+ <View style=14> 


y <View style=9> 
<RCTView style=9> 
+ <TouchableHighlight underli 
+ <Touchableliight ight underli 


AppContainer View RCTView View RCTView Root Provider App 
Navigator View RCTView View RCTView View RCTView 
Connect(MainTabsView) MainTabsView TabBarI0S RCTTabBar 
TabBarItemI0S RCTTabBarItem StaticContainer Connect (HomeView) 
HomeView View RCTView Main View RCTView View 





6.Real device 


6.1 Deploy to real device project_name/ios/project_name/AppDelegate.m 


//jsCodeLocation = [NSURL URLWithString:@"http://localhost: 808 
1/index.ios.bundle?platform=ios&dev=true" |; 


/** 
* OPTION 2 
* Load from pre-bundled file on disk. The static bundle is au 
tomatically 


* generated by the "Bundle React Native code and images" buil 
d step when 


* running the project on an actual device or running the proj 
ect on the 


* simulator in the "Release" build configuration. 
7 


jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" 
withExtension:@"jsbundle"]; 


[El AS AA 








6.2 Debug in real device 


1. project name/ios/project name/AppDelegate.m 


jsCodeLocation = [NSURL URLWithString:0"http://172.28.0.230:80 
81/index.ios.bundle?platform=iosśdev=true"]; 


2. node modules/react- 
native/Libraries/WebSocket/RCTWebSocketExecutor .m 


if (l url) 4 

NSUserDefaults *standardDefaults = [NSUserDefaults standardu 
serDefaults]; 

NSInteger port = [standardDefaults integerForKey:@"websocket 
-executor-port"] ?: 8081; 

NSString *URLString = [NSString stringwithFormat:Q'http://17 
2.28.0.230:%zd/debugger-proxy?role=client", port]; 

_url = [RCTConvert NSURL:URLString]; 


3. 





Bra AO E b E |R|< [E] TodoRN ) M] TodoRN Info.plist ) No Selection 
v B TodoRN Key Type Value 
v [7] TodoRN Y Information Property List Dict (16 items) 
main.jsbundie Localization native development region $ String en 
À) AppDelegate.h Executable file + String $(EXECUTABLE_NAME} 
m AppDelegate.m Bundle identifier s r org.reactjs.native.exam 
InfoDictionary version 2 6.0 
JER Images.xcassets Y 
> Bundle name a strir $(PRODUCT_NAME) 
Info.plist M z 
= > Bundle OS Type code 2 tr APPL 
Edo Bundle versions string, short E t 1.0 
m manm Bundle creator OS Type code a tr 222? 
> EJ Libraries Bundle version y tr 1 
> a TodoRNTests Application requires iPhone environment s 00 YES 
> FF Products Launch screen interface file base name > LaunchScreen 
> Required device capabilities $ Array (1 item) 
> Supported interface orientations $ Array (3 items} 
View controller-based status bar appearance $ Boolean NO 





v App Transport Security Settings Dictionary 
Allow Arbitrary Loads Boolea 


v Exception Domains 


b localnost Dictionary (1 item) 


1.4 DOCs & APIs 


e ReactJS 
e React Native 
e Nuclide 


1.5 Resources 


1.5 Resources 


e React Native: Bringing modern web techniques to mobile 
e React Nativezó 12 pui] TF AF 

e React Native Hik% 

e React NativeffLit : FX ` ALR Fe AL 

e JavaScriptCore 

e React Native ¡OS É ATH ix 
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2 Components 
1.MyComponent.js 


//define component 
class MyComponent extends React.Component £ 
render() £ 
return <Text>My component !</Text>; 


} 


//export component 
export default MyComponent; 


2.Main.js 


//import component 
import MyComponent from './MyComponent'; 
class Main extends React.Component { 
render() £ 
//use component 
return <MyComponent>; 


3.AppRegistry 


AppRegistry.registerComponent('MyApp', () => Main); 


2.1 Render & JSX 


render() { 
const txt = 'Hello'; 
function say(name){ 
return 'I am '+name; 
} 
return ( 
<View> 
<Text>This is a title!</Text> 
<Text>{txt}</Text> 
<View> 
<Text>{say('React')}</Text> 
</View> 
</View> 


DE 


2.2 View, Text, Image, etc 


1. Core Components 


import { 
StyleSheet, 
Text, 
View, 
Image 
} from 'react-native'; 


class Main extends Component { 
render() £ 
return ( 
<View> 
<Image source={require('./img/bg.png' )}> 
<Image source={require('./img/icon.png' )}/> 
<Text> 
some text! 
</Text> 
</Image> 
</View> 


); 


2.3 Lifecyle 


1. Instantiation 
1.1 The lifecycle methods that are called the first time an instance is created 


o getDefaultProps 

o getlnitialState 

o componentWillMount 
o render 

o componentDidMount 


— 


.2 For all subsequent uses of that component class: 


o getlnitialState 

o componentWillMount 

o render 

o componentDidMount” 
2. Lifetime 


o 


componentWillReceiveProps 
o shouldComponentUpdate // return true|false 


shouldComponentUpdate(nextProps, nextState) { 
return nextProps.id !== this.props.id; 


} 


o componentWillUpdate //not called for the initial render 
o render 
o componentDidUpdate 

3. Teardown & cleanup 


o componentWillUnmount 


2.3 Lifecyle 


= | mamo | of component | Mount (O) | + render() | | component0i Mount O) | 


Cannot refer to Cannot refer to Cannot use 
this.state or use this. state or use this.setState() 
this.setState() this.setState() 


(return state instead) 


RECEIVING PROPS | — RECEIVING STATE q MOUNTED + 


shoul Component Update( component l 1Updatel ' componentDidupdate( 
past next? , nextStote, Les nextProps, mextStote, render() prevProps, prevState, 
TRIER nextContext) nextContext) i prevcontext) 
(skipped if no props are changed) (skipoed if forced update) 
Cannot use Cannot use Cannot use 
this.setState() this.setState() this.setStateO 


cs ug 


Cannot use 
this.setState() 
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2.4 Props & States 


1.props: properties are passed to a component and can hold any data 


class User extends Component { 
render(){ 
const user = this.props.data; 
this.props.onReady('I am ready!'); 
return( 
<View> 
<Text> 
score: {this.props.score} 
type: {this.props.type} 
Name: {user.name} 
Age: fuser.age) 


</Text> 
</View> 
); 
} 
} 
//dufaultProps 


User.propTypes = { score: React.PropTypes.number }; 
User.defaultProps = { score: © }; 


var user = {name: 'foo', age: 21}; 
class Main extends Component { 
handleReady(str){ 
console.log(str); 
} 
render(){ 
return( 
<View> 
<User type="Dev" data=fuser) onReady={this.handleReady}/> 


</View> 


); 





2.state: State differs from props in that it is internal to the component. 


class Timer extends Component { 
constructor(props) { 
super(props); 
this.state = {count: 0); 


componentDidMount() £ 
let that = this; 
setInterval(function () { 
that.increase(); 
}, 1000); 


increase() < 
this.setState(fcount: this.state.count + 1)); 


render() < 
return ( 
<View> 
<Text>count: {this.state.count}</Text> 
</View> 


); 


class Main extends Component { 
render(){ 
return( 
<View> 
<Timer/> 
</View> 


); 


3.props VS state 


e Use props to pass data and settings through the component tree. 


e Never modify this.props inside of a component; consider props immutable. 

e Use props to for event handlers to communicate with child components. 

e Use state for storing simple view state like wether or not drop-down options 
are visible. 

e Never modify this.state directly, use this.setstate instead. 





' | in React.js 
NO YES 


| | 


== Does anybody else unrelated 
©] tome need to change this? ` 


14 
YES NO 
"A i 
Es à Do my changes need to 
do persist if I'm remounted? 


’ 


NO 





4.Stateless Component 


const Heading = ({title}) => <Text>{title}</Text>; 


<Heading title="test title"/> 


2.5 Events 


1.Basic events 


1.1. <TouchableHighlight/> 


class Touch extends Component { 
handlePress(){ 
console.log('press'); 
} 
handleLongPress(){ 
console.log('longPress'); 
} 
render() { 
return ( 
<TouchableHighlight 
onPress={this.handlePress} 
onLongPress={this.handleLongPress}> 
<View> 
<Text>Press me!</Text> 
</View> 
</TouchableHighlight> 
); 


1.2. <TextInput/> 


2.5 Events 


class Test extends Component { 


ÅL eae 
//handle events 
FLERE: 
render() £ 
return ( 
<TextInput 
onBlur={...} 
onChange={...} 
onEndEditing={...} 
onSelectionChange={...} 
onSubmitEditing={...} 
</TextInput> 
); 
} 


1.3.DeviceEventEmitter 


//keyboardwillShow, keyboardDidShow, keyboardwillHide, keyboardD 
idHide 

//keyboardwillChangeFrame, keyboardDidChangeFrame 

/fadd the listener 

var listener = DeviceEventEmitter.addListener('keyboardwillShow 


o (e) =>{ 
console.log('Event is fired!'); 
3); 


//remove the listener 
listener. remove( ); 


PEC Ss 


2.Gesture Responder System 
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2.5 Events 


2.1 Lifecycle 








True False 


claim responder 
status? 
False 


| CtartChonidcotRa. 










2.2 example 


class Test extends Component { 
/* Capture handles */ 
//the responder system bubbles up from the deepest component, 
//a parent View wants to prevent the child from becoming respo 
nder on a touch start 
handleStartShouldSetResponderCapture(evt) { 
return true; 
} 
//the responder system bubbles up from the deepest component, 
//a parent View wants to prevent the child from becoming respo 
nder on a touch move 
handleMoveShouldSetResponderCapture(evt){ 
return true; 


/* Lifecycle handles */ 
//Does this view want to become responder on the start of a to 
uch? 
handleStartShouldSetResponder (evt)f 
return true; 
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2.5 Events 


//Called for every touch move on the View when it is not the r 
esponder: 
//does this view want to "claim" touch responsiveness? 
handleMoveShouldSetResponder(evt){ 
ceculira Erue; 
} 
//The View is now responding for touch events. 
handleResponderGrant(evt){ 
console.log('you are touching me'); 
} 
//Something else is the responder right now and will not relea 
se it 
handleResponderReject(evt){ 
console.log('please wait in line’); 


/* event handles */ 
//touch move 
handleResponderMove(evt){ 
console.log('touch move at:', 'X='+evt.pageX, 'Y='+evt.pageY 
); 
} 
//touch end/up 
handleResponderRelease(evt){ 
console.log('touch end'); 
} 
//Something else wants to become responder. Should this view r 
elease the responder? 
handleResponderTerminationRequest(evt){ 
culta cares 
} 
//touch cancel 
handleResponderTerminate(evt){ 
console.log('touch canceled'); 
p 
render() £ 
return ( 
<View 
onStartShouldSetResponderCapture={this.handleStartShould 
SetResponderCapture) 
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onMoveShouldSetResponderCapture={this .handleMoveShouldSe 
tResponderCapture} 

onStartShouldSetResponder={this.handleStartShouldSetResp 
onder } 

onMoveShouldSetResponder={ this .handleMoveShouldSetRespon 
der} 

onResponderGrant={this.handleResponderGrant } 

onResponderReject={this.handleResponderReject } 

onResponderMove={this.handleResponderMove} 

onResponderRelease={this .handleResponderRelease} 

onResponderTerminationRequest={this.handleResponderTermi 
nationRequest } 

onResponderTerminate=(this.handleResponderTerminate)> 

<Text>Press me!</Text> 
</View> 


); 


2.3 evt is a synthetic touch event with the following form nativeEvent: 


e changedTouches - Array of all touch events that have changed since the last 
event 

e identifier - The ID of the touch 

e locationX - The X position of the touch, relative to the element 

e locationY - The Y position of the touch, relative to the element 

e pageX - The X position of the touch, relative to the root element 

e pageY - The Y position of the touch, relative to the root element 

e target - The node id of the element receiving the touch event 

e timestamp - A time identifier for the touch, useful for velocity calculation 

e touches - Array of all current touches on the screen 


3.PanResponder 


3.1 


this. panResponder = PanResponder.create({ 


// Ask to be the responder: 


onStartShouldSetPanResponder: (evt, gestureState) => true, 

onStartShouldSetPanResponderCapture: (evt, gestureState) => tr 
ue, 

onMoveShouldSetPanResponder: (evt, gestureState) => true, 

onMoveShouldSetPanResponderCapture: (evt, gestureState) => true 


AATOUCNESEARE 

onPanResponderGrant: (evt, gestureState) => 4), 

//touch move 

onPanResponderMove: (evt, gestureState) => {}, 
onPanResponderTerminationRequest: (evt, gestureState) => true, 
//touch end/up 

onPanResponderRelease: (evt, gestureState) => {}, 

//touch cancel 

onPanResponderTerminate: (evt, gestureState) => 4), 
onShouldBlockNativeResponder: (evt, gestureState) => true, 


+); 
EJ AAA) 


3.2 A gestureState object has the following: 


e statelD - ID of the gestureState- persisted as long as there at least one touch 
on screen 

e moveX - the latest screen coordinates of the recently-moved touch 

e moveY - the latest screen coordinates of the recently-moved touch 

e x0 - the screen coordinates of the responder grant 

e y0 - the screen coordinates of the responder grant 

e dx - accumulated distance of the gesture since the touch started 

e dy - accumulated distance of the gesture since the touch started 

e VX - current velocity of the gesture 

e vy - current velocity of the gesture 

e numberActive Touches - Number of touches currently on screen 


3.3 PanResponder example in UIExplorer 


2.5 Events 
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2.6 Resources 


e react.parts 

e js.coach 

e props vs state 

e Thinking in React 

e JSX in Depth 

DEMO scripts for this chapter 


3 Styles 


1.Declare Style 


const styles = StyleSheet.create({ 
container: { 
flex: 1, 
backgroundColor: 'blue', 
tr 
text: 4 
fontSize: 14, 
color: 'red' 
} 
3); 


2.Using Styles 


class Main extends Component { 
render() £ 
return ( 
<View style={styles.container}> 
<Text style={styles.text}>I am red.</Text> 
</View> 


); 


3.Properties 


e View Properties 


Image Properties 


Text Properties 


Flex Properties 


Transform Properties 


3 Styles 
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3.1 Flexbox 


1.Flexbox layout 


The main idea behind the flex layout is to give the container the ability to alter 
its items' width/height (and order) to best fill the available space (mostly to 

accommodate to all kind of display devices and screen sizes). A flex container 
expands items to fill available free space, or shrinks them to prevent overflow. 


container \ items 





2.flex:1 


© iPhone 6 - iPho... 





const styles = StyleSheet.create({ 
container: { 
flex: 1 
ty 
header: { 
height: 200, 
backgroundColor: 'red' 
tr 
main: { 
flex: 1, 
backgroundColor: 'blue' 
tr 
footer: { 
height: 200, 
backgroundColor: 'green' 
ty 
text: { 
color: "Brit", 
fontSize: 80 
] 
3); 


3.flexDirection:'row'|'column' 





' 
' 
A AAA A A 


* main-start main-end + 
flex-direction: row; 


3.1 Flexbox 





4.justifyContent:'flex-start'|'flex-end'|'center'|'space-between'|'space-around' 


justify-content 
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3.1 Flexbox 


5.alignitems:'flex-start |'flex-end'|'center'|'stretch' 


align-items 





6.alignSelf:' auto '|'flex-start'|'flex-end'|'center'|'stretch' 


align-self 


flex-end 





7 flexWrap:'wrap'|'nowrap' 





8.Box model 
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2 


3.1 Flexbox 





width = 


borderLeftWidth(25)+paddingLeft(25)+100+borderRightWidth(25)+paddingRight(2 


5)=200 


height = 


borderTopWidth(25)+paddingTop(25)+100+borderBottomWidth(25)+paddingBotto 


m(25)=200 


class Main extends Component { 
render() < 
return ( 
<View style={styles.container}> 
<View style={styles.header}> 
<Text style={styles.text}>200X100</Text> 
</View> 
<View style={styles.main}> 
<View style={styles.mainContent}> 
<Text style={styles.text}>100X100</Text> 
</View> 
</View> 
<View style={styles.footer}> 
<Text style={styles.text}>200X100</Text> 
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</View> 
</View> 


); 


const styles = StyleSheet.create({ 


container: { 
flex: 1, 
justifyContent: 'center', 
alignitems: 'center' 
tr 
header: { 
height: 100, 
width: 200, 
backgroundColor: 'red' 
tr 
main: { 
height: 200, 
width: 200, 
padding: 25, 
borderWidth: 25, 
borderColor: 'black', 
margin: 25, 
backgroundColor: 'blue' 
Jr 
mainContent: { 
flex: 1, 
justifyContent: 'center', 
alignitems: 'center', 
backgroundColor: 'red' 
ty 
footer: { 
height: 100, 
width: 200, 
backgroundColor: 'green' 
tr 
text: { 
color: iBT, 
fontSize: 20 


© iPhone 6 - iPhone 6 / iOS... 


carrier > 5:45 PM mma: 


200X100 


100X100 





3.2 Absolute & Relative 


1.absolute 


© iPhone 6 - iPhone 6 / iOS 9.3 (13E230) 
Carrier © 3:30 PM = 





class Position extends Component { 
render() £ 
return ( 
<View style={styles.container}> 
<View style={styles.box1}> 
<Text style={styles.text}>1</Text> 
</View> 
<View style={styles.box2}> 
<Text style={styles.text}>2</Text> 
</View> 
<View style={styles.box3}> 
<Text style=fstyles.text |>3</Text> 
</View> 
</View> 


); 


] 
const styles = StyleSheet.create({ 


container: { 
flex: 1 


ty 
box1: { 


position: ‘absolute’, 
top: 40, 
left: 40, 
width: 100, 
height: 100, 
backgroundColor: 'red' 
3, 
box2: 4 
position: 'absolute', 
top: 80, 
left: 80, 
width: 100, 
height: 100, 
backgroundColor: 'blue' 
ty 
box3: { 
position: ‘absolute’, 
top: 120, 
left: 120, 
width: 100, 
height: 100, 
backgroundColor: 'green' 
tr 
text: { 
color: “EFE, 
fontSize: 80 
p 
3); 


2.zlndex, v0.29 or transform 


iPhone 6 - iPhone 6 / iOS 9.3 (13E230) 


Carrier © 3:54 PM = 





box2: { 


ty 


position: ‘absolute’, 

top: 80, 

left: 80, 

width: 100, 

height: 100, 

backgroundColor: 'blue', 

transform: [{'translate': [0,0, 1]}] 


3.relative(default) 


iPhone 6 - iPhone 6 / iOS 9.3 (13E230) 


Carrier > 3:39 PM = 





class Relative extends Component { 
render() £ 


return ( 


} 


<View style={styles.container}> 
<View style={styles.box1}> 
<Text style={styles.text}>1</Text> 
<View style={styles.ball}/> 
</View> 
<View style={styles.box2}> 
<Text style=fstyles.text |>2</Text> 
</View> 
</View> 


); 


const styles = StyleSheet.create({ 


container: { 


ty 


flex: 1 


box1: { 


Jr 


position: ‘relative’, 
top: 40, 

left: 40, 

width: 100, 

height: 100, 
backgroundColor: 'red' 


box2: { 


Jr 


position: ‘absolute, 
top: 100, 

left: 100, 

width: 100, 

height: 100, 
backgroundColor: 'blue' 


ball: { 


position: ‘absolute, 
top: 40, 

left: 40, 

width: 40, 

height: 40, 

borderRadius: 20, 
backgroundColor: 'yellow' 





3.2 Absolute & Relative 


tr 
text: { 
colon: "EMMETT" , 
fontSize: 80 
} 
}); 


4.fixed 


© iPhone 6 - iPhone 6 / iOS 9.3 (13E230) 


Fixed top bar 


3 
Fixed bottom bar 





class Fixed extends Component £ 


render() £ 
return ( 
<View style={styles.container}> 
<View style={styles.tbar}> 
<Text style={styles.text}>Fixed 
</View> 
<ScrollView style={styles.main}> 
<View style={styles.item}><Text 
Text></View> 
<View style={styles.item}><Text 
Text></View> 
<View style={styles.item}><Text 
Text></View> 
</ScrollView> 
<View style={styles.bbar}> 
<Text style={styles.text}>Fixed 
</View> 
</View> 


); 


y 
const styles = StyleSheet.create({ 


container: { 


flex: 1 
tr 
tbar: £ 
width: 375, 
height: 100, 
borderBottomwidth: 5, 
borderColor: 'black', 
backgroundColor: 'red' 
ty 
main: { 
flex: 1 
3, 
item: £ 
height: 200, 
width: 375, 


marginTop: 10, 


backgroundColor: 'green' 


top bar</Text> 


style={styles.text}>1</ 


style={styles.text}>2</ 


style={styles.text}>3</ 


bottom bar</Text> 


tr 

bbar: { 
width: 375, 
height: 100, 
borderTopWidth: 5, 
borderColor: 'black', 
backgroundColor: 'red' 


3, 
text: { 
color: ERE 
fontSize: 40 
} 
}); 


3.3 Size & Dimensions & onLayout 


1.window size 


O iPhone 6 - iPhone 6 / iOS 9.3 (13E230) 





let winSize = Dimensions.get('window' ); 
console.log(winsize); 
class Size extends Component { 
render() £ 
return ( 
<View style={styles.container}> 
<View style={styles.block}/> 
<Text style={styles.text}>some text</Text> 
</View> 


); 


} 
const styles = StyleSheet.create({ 


container: { 
flex: 1, 
alignItems: 'flex-start' 


ty 
block: { 
height: 100, 
width: winSize.width, 
backgroundColor: 'red' 
3, 
text: { 
COLOR SZWÓW, 
fontSize: 40/winSize.scale, 
backgroundColor: 'blue' 
} 
3); 


2.onLayout 


3.3 Size & Dimensions & onLayout 


class Size extends Component { 
handleTextLayout(evt){ 
console.log(evt.nativeEvent. layout); 


} 
render() £ 
return ( 
<View style={styles.container}> 
<View style={styles.block}/> 
<Text style={styles. text} 
onLayout={this.handleTextLayout}>some text</Text> 
</View> 
); 
} 


53 


3.4 Inheritance 
1.pass styles as props 


class InheritanceStyle extends Component { 
render() £ 
return ( 
<View style={this.props.parentColor}> 
</View> 


); 


class Main extends Component { 
handleReady(str){ 
console.log(str); 
D 
render() £ 
return ( 
<View style={styles.container}> 
<InheritanceStyle parentColor={styles.blue}/> 
</View> 


); 


3 
const styles = StyleSheet.create(( 


container: { 
flex: 1 

tr 

blue: { 
flex: 1, 
backgroundColor: 'blue' 

} 

}); 


2.concatenation styles 


BaseStyles.js 


import { StyleSheet,Dimensions } from 'react-native'; 
let winSize = Dimensions.get('window' ); 
const BaseStyles = StyleSheet.create({ 
text: | 
fontSize: 40/winSize.scale 
} 


}); 
export default BaseStyles; 


import BaseStyles from './BaseStyles'; 


class InheritanceStyle extends Component { 
render() { 
return ( 
<View style={this.props.parentColor}> 
<Text style=([BaseStyles.text, styles.text]}> this is a 
long text </Text> 


</View> 
); 
y 
} 
const styles = StyleSheet.create({ 
text: { 
color: ‘Fitter - 
} 
3); 


© iPhone 6 - iPhone 6 / iOS 9.3 (13E230) 





ris is a long text 


3.4 Inheritance 
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3.5 Resources 


3.5 Resources 


e A Complete Guide to Flexbox 
e A Visual Guide to CSS3 Flexbox Properties 
e Understanding Flex Direction 
e DEMO scripts for this chapter 


57 


À Avnhitaatiira 
4 Architecture 


4 Architecture 


1.MVC problems 





2.Flux 








e» © es 
Web Reg- Action 
CUIR — PA or - — Creators 


Y 
User 
Interactions 





o 





Change 
React IB Events + 
Views IB SE 

Queries 


3.Data flow 


4 Architecture 


action = | 
type: NEW_THREAD, 
to: ‘Bill’, 
text: ‘hey Bill”, 
threadlD: ‘5893696, 
messagelD: '0272fac4', 


Add to map of messages: 
‘5e93696f': | 


‘0272fac4' : | 
text: ‘hey Bill’, Messa ge Store participants: ['Bill', Jing'], 
thread: '5693696f, messageList: ['0272tac4"] 


author: ‘Jing’ 
} 


Message View 





Flux TodoMVC Example 


4.1 Redux 


4.1 Redux 


1.Actions & Action Creators 


//action type 
const ADD TODO = 'ADD_TODO'; 


//action creator, semantic methods that create actions 
//collected together in a module to become an API 
function addTodoAction(title, hour) £ 

//action, an object with a type property and new data, like ev 
ents 

return £type: ADD_TODO, title, hour) 


2.Reducers 
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//a function that accepts an accumulation and a value and return 
s a new accumulation. 
function todoReducers(state = [|], action) { 
switch (action.type) { 
case ADD_TODO: 
//always return a new state, never mutate old state 
return [ 
t 
id: Utils.GUID(), 
title: action.title, 
endTime: getEndTime(action.hour), 
completed: false 


Jr 


...Sstate 
] 
default: 
//return default state 
return state 


3.Store 


import { createStore } from 'redux'; 
//1. define store 
let store = createStore(todoReducers); 


class App extends Component { 
constructor(props)f 
super(props); 
this.state = {todos: []}; 
3 
componentDidMount( ) { 
//2. subscribe store 
this.unsubscribeStore = store.subscribe(() =>f 
//3. getState 
this.setState({todos: store.getState()}); 


+); 


componentWillUnmount ()£ 
//5. unsubscribe store 
this.unsubscribeStore(); 
} 
renderTodoList = ()=>{ 
//reder todo list 
return this.state.todos.map( (todo)=> { 
return <Text key={todo.id}>Todo: {todo.title}</Text> 
3); 


} 
handleAddTodo = ()=>{ 


//4. dispatching actions 
store.dispatch( addTodoAction('Create a new todo', 8) ); 
} 
render() { 
return ( 
<View> 
<TouchableHighlight onPress={this.handleAddTodo}> 
<Text>Add Todo</Text> 
</TouchableHighlight> 
<ScrollView>{this.renderTodoList()}</ScrollView> 
</View> 


); 


4 Data flow 


4.1 Redux 







Initial state received 


Updated on Store change 
event 


Component In App 


Store 


Some component 
action (eg. button 
clicked) 


store.dispatch() 















Action 
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React + Redux Cycle 


Action Creator 


User clicks 
something 










Produces a 


Flows into 


Produces 


Flows into 


store.dispatch( addTodoAction( Create a new todo $(num)') ); 


return (type: ADD_TODO title, hour) 






switch (action.type) ( 
case ADD TODO: 
return [ 


reducer may combine the output into a state 


The Redux store saves the complete state returned by the reducer 


| 


this unsubscribeStore = store subscribe(() =>{ 
this setState({todos: store getState()}); 
Wi 





Create a new todo. 
todo3 
todo2 
todo1 

















{ 
id: Utils GUID(), 
title: action title, 
endTime: getEndTime(action.hour), 
completed: false 






} 


state 


] 










render TodoList = ()=>{ 
return this.state todos map({ (todo)=> { 
return <Text key={todoid}>Todo: {todotitle}</Text> 
Wi 





} 


4.1 Redux 
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4.2 react-redux 
1.Actions 


import * as navigationActions from './navigation'; 
import * as todosActions from './todos'; 


export default £...navigationActions, ...todosActions); 


2.combineReducers() 


import { combineReducers } from 'redux'; 
import navigation from './navigation'; 
import todos from './todos'; 


const rootReducer = combineReducers({ 
navigation, todos 


+); 


export default rootReducer; 


3.Application state by configureStore() 


import £ createStore ) from 'redux'; 
import reducers from '../reducers'; 


export default function configureStore() { 


const store = createStore(reducers); 
return store; 


4.mapStateToProps & mapDispatchToProps & bindActionCreators 


import { bindActionCreators } from 'redux'; 
import { connect } from 'react-redux'; 


class App extends Component { 
renderTodoList = ()=>{ 
//reder todo list 
return this.props.todos.map( (todo)=> { 
return <Text key={todo.id}>Todo: {todo.title}</Text> 
3); 


] 
handleAddTodo = ()=>{ 


this.props.actions.addTodoAction('Create a new todo', 8); 
} 
render() { 
return ( 
<View> 
<TouchableHighlight onPress={this.handleAddTodo}> 
<Text>Add Todo</Text> 
</TouchableHighlight> 
<ScrollView>{this.renderTodoList()}</ScrollView> 
</View> 


); 


function mapStateToProps(state) { 
return { 
todos: state.todos 


+; 


function mapDispatchToProps(dispatch) £ 
return { 
actions: bindActionCreators(Actions, dispatch) 


export default connect( 
mapStateToProps, 
mapDispatchToProps 


) (APP); 


5.Passing the Store with <Provider/> 


import React, £ Component ) from 'react'; 
import { Provider } from 'react-redux'; 


import App from './containers/App'; 
import configureStore from './store/configureStore'; 


class Root extends Component { 
render() { 
return ( 
<Provider store={configureStore()}> 
<App /> 
</Provider> 


); 


export default Root; 
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4.3 Containers & Components 


1.Presentational and Container Components 


Presentational 
Components 


How things look 


Purpose (markup, styles) 
Aware of 
Redux Ng 
To read 
data Read data from props 


To change Invoke callbacks from 
data props 


Are written By hand 


Container Components 


How things work (data fetching, 
state updates) 


Yes 


Subscribe to Redux state 


Dispatch Redux actions 


Usually generated by React Redux 


2. components/home-view & containers/HomeView 


2.1 home-view components 


home-view 
mg 
it] border_colorQ 


fil chalkboard.png 


[i] checked@2x.png 
[1] checked@3x.png 
[i] checked_filled@2x.png 
[il checked_filled@3x.png 
[i] info@2x.png 
[i] info@3x.png 
[i info_filled@2x.png 
[i] info_filled@3x.png 
[1] todo.png 
[=i Header.js 
[a index.js 





2.2 HomeView container 


import £ 


Header, 

Main, 
} from '../components/home-view'; 
import Actions from '../actions'; 


class HomeView extends Component { 
render() £ 
return ( 
<View> 
<Header {...this.props}/> 
<Main {...this.props} isVisible={this.state.isVisible}/> 
</View> 


); 


function mapStateToProps(state) { 
return { 
todos: state.todos 


+; 


function mapDispatchToProps(dispatch) £ 
return { 
actions: bindActionCreators(Actions, dispatch) 


export default connect( 
mapStateToProps, 
mapDispatchToProps 

) (HomeView) ; 


4.4 Todo React Native App 


4.4 Todo React Native App 


1.Overview 


‘oa Prom $- Em 6 iOS 8.5 1190230) ‘22 Pirina E ¡Peer € 1106 95 119 2201 
eriw P REL 






Tado 





Hour 





Make atodo o Nammi 


a eja oja aja 
R RIR BIP 


Complete a todo 


2.Structure 





© | R 


Todo2 


Todot 


Meke a todo! 


Pom R - ithew Bi iOS RA 1102301 





brosw 
common 
complete 
edit-view 


home-view 


navigation.js 


utils 


root. 





3.Containers & Components 












components 


main-tabs-view 


home-view 








Header 






containers 


store (Application State) 


Listltem 


reducers 










completed-view 









navigations Header 


Listltem 


actions 


todos edit-view 





navigations 


il 


ar 


PEN ES 





broswer-view 
Header 


Listltem 





common 


4.5 Naming convention 


1.Containers & Components 


1.1. Container file: 


src/containers/ModuleNameView. js 


Component files: 


src/components/module-name-view 
- index.js 
- Main.js 
- Header.js 
- img 
- icon@2x.png 
- icon@3x.png 


1.2. Event name: 


handleEventName = ()=>{ 


<MyComponent onEventName={this.handleEventName}/> 


1.3. Render methods: 


renderMethodName = () => £ 

//todo 

} 

render() £ 

return ( 
<View> 
(this.renderMethodName ()+ 

</View> 


); 


1.4. mapState ToProps & mapDispatchToProps 


function mapStateToProps(state) { 
return { 
todos: state.todos 


+; 


function mapDispatchToProps(dispatch) £ 
return £ 
actions: bindActionCreators(Actions, dispatch) 


2.actions src/actions 
index.js 


todos.js 
navigation.js 


2.1 src/constants/ActionTypes.js 


export const SWITCH MAIN TAB = 'SWITCH MAIN TAB'; 


VAN 


2.2 src/actions/todos.js 


import ” as types from '../constants/ActionTypes' 


export function addTodo(title, hour) { 
return £type: types.ADD_TODO, title, hour) 


3.reducers src/reducers 


index.js 
todos.js 
navigation.js 


3.1. src/reducers/todos.js 


import { ADD TODO, DELETE TODO, EDIT TODO, COMPLETE TODO ) from 
'../constants/ActionTypes' 
const initialState = [] 


export default function todos(state = initialState, action) { 
switch (action.type) { 
case ADD_TODO: 
//todo 
default: 
return state 


4.styles src/styles 
index.js 


Basic.js 
Theme.js 


4.1 src/styles/Basic.js 


import Y StyleSheet, Dimensions } from 'react-native'; 
let winSize = Dimensions.get('window'); 
const Basic = StyleSheet.create({ 


text: Y 
fontSize: 32/winSize.scale 
3 
3); 


export default Basic; 


4.2 src/styles/Theme.js 


//colors 

const color = £ 
green: '#00551e', 
brown: '#693504', 
red: '*db2828' 


//other 
const active = { 
opacity: 0.6 


export default (color, active) 


4.3 import {Theme, BasicStyle} from '../../styles'; 


4.6 Resources 


4.7 Resources 


e Flux 

e Facebook: MVC Does Not Scale, Use Flux Instead 
e Redux 

e fluxchat by Bill Fisher 

e |ntroduce Flux & react in practices (KKBOX) 

e react-flux-fluent-2015 by Bill Fisher 

e Flux TodoMVC Example 

e Todo React Native App 
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5 Data 


1.Networking 


e Fetch 
e XMLHttpRequest API 
e WebSocket 


5.1 Fetch 


1.apply redux-thunk middleware 


import £ applyMiddleware, createStore, compose ) from 'redux'; 
import thunk from 'redux-thunk'; 

import createLogger from 'redux-logger'; 

import reducers from '../reducers'; 


var middlewares = compose(applyMiddleware(thunk), autoRehydrate( 


)); 


export default function configureStore() £ 
const store = createStore(reducers, undefined, middlewares); 
return store; 


2.start & end action types 


//todo action types 
export const START_FETCH_ALL_TODOS = 'START_FETCH_ALL_TODOS'; 
export const FETCH_ALL_TODOS = 'FETCH_ALL_TODOS'; 


3.fetch flow 


import * as types from '../constants/ActionTypes'; 
import * as APIs from '../constants/ServerAPIs'; 


function shouldFetchAllTodos(state) £ 
const data = state.todos; 
if (data 88 data.isFetchingAllTodos) { 
return false 


} 


Hetummennuer 


export function fetchAllTodos() { 
return async (dispatch, getState) =>{ 
//verify 
if(!shouldFetchAllTodos(getState())){ 
return Promise.resolve(); 


//dispatch fetch start action 
dispatch({type: types.START_FETCH_ALL_TODOS}); 


//fetching 

const response = await fetch(APIs.allTodos); 
//response 

const data = await response. json(); 


//dispatch fetch end action 
return dispatch({ 
type: types.FETCH ALL TODOS, 
data 


+); 


4.reducer 


export default function todos(state = initialState, action) f 
switch (action.type) £ 
case types.START_FETCH_ALL_TODOS: 
return Object.assign({}, state, fisFetchingAllTodos: true} 


DE 


case types.FETCH ALL TODOS: 
return Object.assign({}, state, { 

isFetchingAllTodos: false, 

data: action.data.data.reduce(function (pre, cur) { 
//remove duplicates 
ipre.find( key=> key.id===cur.id) && pre.push(cur); 
return pre; 

}, [...state.data]) 


+); 


default: 
return state 


5.dispatch 8 render 


componentDidMount(){ 
//fetch data from server 
this.props.actions.fetchAllTodos(); 


renderLoading = () => < 
if (this.props.todos.isFetchingAllTodos) { 
return ( 
<View style={styles.loading}> 
<Text style={styles.loadingText}>Loading...</Text> 
</View> 


} 


return null; 


dispatch fatchAllTodos 


should fetch 


return Promiseresolve() dispatch start fetch 


dispatch end fetch action hide loading £ render list 


5.2 Persistent 


1.AsyncStorage 


2.apply redux-persist middlewear 


import { AsyncStorage } from 'react-native'; 

import £ applyMiddleware, createStore, compose ) from 'redux'; 
import thunk from 'redux-thunk'; 

import {persistStore, autoRehydrate} from 'redux-persist'; 
import reducers from '../reducers'; 


var middlewares = compose(applyMiddleware(thunk), autoRehydrate( 


)); 


export default function configureStore() { 
const store = createStore(reducers, undefined, middlewares); 
persistStore(store, {storage: AsyncStorage}); 
return store; 


5.3 Resources 


e Redux Async Actions 
e Todo React Native App 


6 Router 


e NavigatorlOS 
e Navigator 


6.1 Navigator 


1.define routes 


import MainTabsView from './MainTabsView'; 
import EditView from './EditView'; 
import BroswerView from './BroswerView'; 


const ROUTES = { MainTabsView, BroswerView, EditView }; 


2.config Navigator 


class App extends Component { 
renderScene = (route, navigator) => £ 
let Scene = ROUTES[route.name]; 
return <Scene {...route} navigator={navigator}/>; 
} 
configureScene = (route, routeStack) => { 
switch (route.name){ 
case 'EditView': 
return Navigator.SceneConfigs.FloatFromBottom; 
default: 
return Navigator.SceneConfigs.PushFromRight; 


} 
render() { 
return ( 
<View style={styles.container}> 
<StatusBar barStyle="light-content"/> 
<Navigator 
initialRoute={{name: 'MainTabsView' }} 
renderScene={this.renderScene} 
configureScene={this.configureScene}/> 
</View> 


3.forward & back 





Navigation stack 





handleEdit = ()=>{ 
//Navigate forward to a new scene 
this.props.navigator.push({name: 'EditView', data: this.prop 
s.data}); 
} 


close = ()=>{ 
//Transition back and unmount the current scene 
this.props.navigator.pop(); 


navigatorpush({name: 'EditView')); 


a 4 Navigator — em EditView 
_ _—x——_e— o 


navigator.pop() 


4. onDidFocus € onWillFocus 


componentDidMount(){ 
this.currentRoute = this.props.navigator.navigationContext.c 
urrentRoute; 
this.bindEvents(); 
} 
componentWillUnmount(){ 
this.unBindEvents(); 


} 
bindEvents = ()=>{ 
this.willFocusSubscription = this.props.navigator.navigatio 
nContext.addListener('willfocus', (event) => { 
if (this.currentRoute !== event.data.route) { 
this.setState(fisVisible: false}); 
} 
3); 
this.didFocusSubscription = this.props.navigator.navigation 
Context.addListener('didfocus', (event) => { 
if (this.currentRoute === event.data.route) { 
this.setState({isVisible: true}); 
} 
3); 


} 


unBindEvents = ()=>{ 
this.willFocusSubscription.remove(); 
this.didFocusSubscription.remove(); 


6.2 Resources 


e Routing and Navigation in React Native 


7 Native Modules (draft) 


7 Native Modules 


Somewhere in your RN codes, insert: 


console.log(_fbBatchedBridge); 


then in your debugger (hitp://localhost:8081/debugger-ui) you'll see something like 


below, 





= > Q [3 localhost:8081/debugger-ui 





React Native JS code runs inside 
this Chrome tab. 


Press GE AE to open Developer 
Tools. Enable Pause On Caught 
Exceptions for a better debugging 
experience. 


Status: Debugger session #10000 
active. 


Y MessageQueue {_callableModules: 


Cr à] Elements Console Sources Network Timeline Profiles 


v RemoteModules: Objec 
> AccessibilityManager: Object 
> ActionSheetManager: Object 
> AlertManager: Object 
> AppState: Object 
> AsyncLocalStorage: Object 


> DevMenu: Object 

> ExceptionsManager: Object 
> ImageEditingManager: Object 
> ImageLoader: Object 

> ImageStoreManager: Object 
> ImageViewManager: Object 
> JSCExecutor: Object 

> KeyboardObserver: Object 
> LinkingManager: Object 

> LocationObserver: Object 
> NavigatorManager: Object 
bNetInfo: Object 

> Networking: Object 

> RedBox: Object 

> ScrollViewManager: Object 
> SettingsManager: Object 

> SourceCode: Object 

> StatusBarManager: Object 
> Timing: Object 

> UIManager: Object 

> Vibration: Object 

> ViewManager: Object 

> WebSocketModule: Object 

> WebViewManager: Object 

> proto : Object 


STTJBTEMOGUTEST"UG 
> AppRegistry: Object 

> HMRCLient: Object 

> HeapCapture: Object 

> JSTimersExecution: Object 

> PerformanceLogger: Object 

> RCTDebugComponentOwnership: Object 

> RCTDeviceEventEmitter: RCTDeviceEventEmitter 

> RCTEventEmitter: Object 

> RCTLog: function RCTLog() 

> RCTNativeAppEventEmitter: RCTDeviceEventEmitter 
> Systrace: Object 


b _callbacks: Array [2] 

> debugInfo: Object 
_eventLoopStartTime: 1467083013666 
_lastFlush: 1467083013666 

> queue: Array [4] 





that's what we're going to talk about in this chapter. 





Resources Security Audits 


O w  JSONView v (Preserve log (4 Show all messages 
Object, queue: Array[4], _callbacks: Array[2], _callbackID: 2 


Custom Native Module 
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7.1108 


7.2 Android 


7.3 Resources 


e An OpenGL App with React Native 


8 Integration 


Most of the time we are not starting a new app, we just want to use react-native to 
develop some new features, so integration should be a necessary skill for react- 
native developers. 


Assume that you have create some features in the AwesomeProject, you want to 
create an exactly same environment for your current project. 


~/rn_demo/AwesomeProject — -bash 


Danychen: rn_demo danychen$ ls 

AwesomeProject MyAndroidApp Myi0SApp 
Danychen:rn_demo danychen$ cd AwesomeProject/ 
Danychen:AwesomeProject danychen$ react-native --version 
react-native-cli: 0.2.0 


Danychen:AwesomeProject danychen$ | 


Notice that version is very important after your app published. If you want to 
upgrade react-native and package codes, that almost means you don't want to 
maintain the old version any longer. 


8.1 iOS 


e Cocoapods with local path 


Requirement : CocoaPods 


After pod version > 1.0, you need to identify the target. Create 'Podfile' in 
project root folder : 


target 'MyiOSApp' do 
pod 'React', :path => '../../AwesomeProject/node_modules/r 
eact-native', :subspecs => [ 


'Core', 
'RCTImage', 
'RCTNetwork', 
'RCTText', 
'RCTWebSocket', 
] 
end 


then pod install 


Danychen:Myi0SApp danychen$ pod install 

Analyzing dependencies 

Fetching podspec for ‘React from *../../AwesomeProject/node_modules/react-nativ 
e 

Downloading dependencies 

Installing React (0.28.0) 

Generating Pods project 

Integrating client project 


[!] Please close any current Xcode sessions and use “MyiOSApp.xcworkspace' for t 
his project from now on. 

Sending stats 

Pod installation complete! There are 5 dependencies from the Podfile and 1 total 
pod installed. 

Danychen:MyiOSApp danychen$ pod --version 

1.0.1 


9.1.1 Package 


react-native bundle 

--platform ios 

--dev false 

--entry-file index.ios.js 

--bundle-output ios/bundle/index.ios.bundle 
--assets-dest ios/bundle 


9.1.2 Image 


e Cache path 


8.2 Android 


At first I followed the official instruction (which seems very simple) but lots of build 
or runtime error occurs ©. 


Such as: 
Can't find variable: _ fbBatchedBridge (<unknown file>:1) 


java.lang.UnsatisfiedLinkError: could find DSO to load: 
libreactnativejni.so 


android.view.WindowManager$BadTokenException: Unable to add window 
android.view.ViewRootImpl$WO5d992cf -- permission denied for this 
window type 


But the demo works corrcetly, so | decided to copy the build settings of it. And 
finally it works normally on my Nexus 5X. Steps: 


e Add the path to the root gradle file, 


// Top-level build file where you can add configuration options common to all sub-projects/modules. 


buildscript { 
repositories { 
jcenter() 


dependencies { 
classpath 'com.android.tools.build:gradle:2.1.2' 


// NOTE: Do not place your application dependencies here; they belong 
// in the individual module build.gradle files 
} 
} 


allprojects { 

repositories { 
jcenter() 

maven { 





A talle 








Al Ob 


url "$projectDir/../AwesomeProject/node_modules/react-native/android" 


task clean(type: Delete) { 
delete rootProject.buildDir 
} 


e Modify the app gradle file, 


lyAndroidApp x (© app x | El proguard-rules.pro x Call gradle-wrapper.properties x Call gradle.properties x (© settings.gradle x 
apply plugin: 'com.android.application' 

apply from: "../../AwesomeProject/node_modules/react-native/react.gradle" 

1 

afdlroid 4 


compileSdkVersion 23] 
buildToolsVersion "23.0.3" 
defaultConfig { 
applicationId “cc.danycoding.myandroidapp" 
minSdkVersion 16 
targetSdkVersion 23 
versionCode 1 
versionName "1.0" 


abiFilters “armeabi-v7a", "x86" 








} 
splits { 
abi { 
reset () 
enable enableSeparateBuildPerCPUArchitecture 
universalApk false // If true, also generate a universal APK 
[include “armeabi-v7a", "x86" 
} 
} 


buildTypes { 
release { 
minifyEnabled false 
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro' 


} 
} 


dependencies { 

compile fileTree(dir: 'libs', include: ['x.jar']) 
compile "com.facebook.react:react-native:+" // From node modules 
testCompile 'junit:junit:4.12' 

compile 'com.android.support:appcompat-v7:23.0.1' 2 






“1. Official demo use this variable to control wheather building different apps 
for cpus, that will reduce the size of each app, | just ignore it here. 


*2. The version support package matters.. As react-native Android use many 
open source projects, if you use some of them already, you should check the 
version or exclude the from dependencies. [he list currently 


compile 'com.android.support:appcompat-v7:23.0.1' 

compile 'com.android.support:recyclerview-v7:23.0.1' 
compile 'com.facebook.fresco:fresco:0.11.0' 

compile 'com.facebook.fresco:imagepipeline-okhttp3:0.11.0' 
compile 'com.fasterxml.jackson.core:jackson-core:2.2.3' 
compile 'com.google.code.findbugs:jsr305:3.0.0' 

compile 'com.squareup.okhttp3:okhttp:3.2.0' 

compile 'com.squareup.okhttp3:okhttp-urlconnection:3.2.0' 
compile 'com.squareup.okhttp3:okhttp-ws:3.2.0' 

compile 'com.squareup.okio:okio:1.8.0' 

compile 'org.webkit:android-jsc:r174650' 


8.2 Android 


e Modify root gradle.properties, 
€ MyAndroidApp x (© app x {iil gradle-wrapper.properties x {ail gradle.properties x 


# Project-wide Gradle settings. 


# IDE (e.g. Android Studio) users: 
# Gradle settings configured through the IDE *will overridex 
# any settings specified in this file. 


For more details on how to configure your build environment visit 
http://ww.gradle.org/docs/current/userguide/build_environment.html 


* # 


Specifies the JVM arguments used for the daemon process. 

The setting is particularly useful for tweaking memory settings. 

Default value: -Xmx10248m -XX:MaxPermSize=256m 

org.gradle.jvmargs=-Xmx2048m -XX:MaxPermSize=512m -XX:+HeapDumpOnOutOfMemoryError -Dfile.encoding=UTF-8 


# When configured, Gradle will run in incubating parallel mode. 

# This option should only be used with decoupled projects. More details, visit 

# http://ww.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_ projects 
# org.gradle.parallel=true 

useDeprecated 





e Add proguard rules, 
idApp X (© app x B proguard-rules.pro X [lı gradle-wrapper.properties x {iil gradle.properties x (© settings.gradle x [Dì local.properties x + 


# Keep our interfaces so they can be used by other ProGuard rules. 

ł See http://sourceforge.net/p/proguard/bugs/466/ 

-keep,allowobfuscation @interface com. facebook. proguard.annotations.DoNotStrip 
-keep,allowobfuscation Ginterface com. facebook. proguard.annotations.KeepGettersAndSetters 


# Do not strip any method/class that is annotated with @DoNotStrip 
-keep (com. facebook.proguard.annotations.DoNotStrip class x 
-keepclassmembers class * { 

(com. facebook. proguard.annotations.DoNotStrip x; 
+ 


-keepclassmembers (com. facebook.proguard.annotations.KeepGettersAndSetters class * { 
void setx (xxx); 
xxx get*(); 


} 


-keep class * extends com.facebook.react.bridge.JavaScriptModule { *; } 

-keep class * extends com.facebook.react.bridge.NativeModule { *; } 
-keepclassmembers,includedescriptorclasses class x { native <methods>; + 

-keepclassmembers class * 4 (com. facebook. react.uimanager.UIProp <fields>; } 

-keepclassmembers class * 4 (com. facebook. react.uimanager.annotations.ReactProp <methods>; } 
-keepclassmembers class * { @com. facebook. react.uimanager.annotations.ReactPropGroup <methods>; } 


-dontwarn com. facebook. react.** 
# okhttp 


-keepattributes Signature 
-keepattributes *Annotation* 
-keep class okhttp3.*k { x; } 
-keep interface okhttp3.xx { *; ) 
-dontwarn okhttp3.** 


# okio 
-keep class sun.misc.Unsafe { *; } 
-dontwarn java.nio.file.* 


-dontwarn org. codehaus.mojo.animal_sniffer. IgnoreJRERequirement 
-dontwarn okio. xx 
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AndroidManifest.xml, you can remove the permission if you don't need debug 
mode. 
Ò MyAndroidApp x © app x E proguard-rules.pro X [© AndroidManifest.xml x [7h gradle-wrapper.properties x FT 


[ manifest || uses-sdk | 

<?xml version="1.0" encoding="utf-8"?> 

<manifest xmlns:android="http://schemas.android.com/apk/res/android" 
package="cc.danycoding.myandroidapp"> 


<uses-permission android:name="android.permission. INTERNET" /> 


<uses-permission android:name="android.permission.SYSTEM ALERT WINDOW"/> 





<uses-sdk 
android:minSdkVersion="16" 0) 





roid:targetSdkVersion: /> 
<application 
android:alLowBackup="true" 
i android: icon="@mipmap/ic_launcher" 


android: Label="MyAndroidApp" 
android: supportsRtl="true" 
android: theme="@style/AppTheme"> 
<activity android:name=".MainActivity"> 
<intent-filter> 
<action android: name="android.intent.action.MAIN" /> 


<category android: name="android.intent.category.LAUNCHER" /> 
</intent-filter> 
</activity> 
</application> 


</manifest> 


9.2.1 Package 


react-native bundle 

--platform android 

--dev false 

--entry-file index.android.js 

--bundle-output android/bundle/index.android.bundle 
--assets-dest android/bundle/ 


8.3 Before publishing 
e Turn off debug Settings. 


. Implementation of exception handler. 


8.3 Resources 


e Integrating with Existing Apps - ¡OS 


e Integrating with Existing Apps - Android 


9.3 Resources 


e React Native Module for CodePush 
e JSPatch 


10 Performance (draft) 


10.1 shouldComponentUpdate 


This chapter can be applied to all react apps. 


shouldComponentUpdate 


React is usually fast, but you still can improve performance by optimizing function 
shouldComponentUpdate. By default it returns true, if returns false, the render 
function will be skipped. 


This function is frequently invoked when states or props are changed. So it's 
important to keep it simple and fast. When you called setState ,the render 
function will always be excuted even if previous states are equal to current. This is 
where we can make some optimization. 


demo? 


In demo1, when click button, it will set same state, but render times will still 
increase. 


demo2 


In demo2, we check the value of name is equal to before or not, if equal return 
false, then we reduce the times of render function. 


But if our states structure is complicated, such as fa: { b: £ c: [1, 2, 3] 
))) , we have to compare them deeply. This is obviously against the rules we 
mentioned above, keep shouldComponentUpdate simple 


Immutable-js 


Immutable is a concept from functional programming, one of immutable data 
features is that it can not be modified after being created. So there are some 
algorithm to create hash for every data structure(for more detail). We can use this 
feature to prevent deeply compare, shallow compare is enough. Here we will use 
immutable-js from facebook 


demo3 


In demo3, we click first button several times, times will only plus one time, click 
second button , times will increase. 


Resources 


e ReactJS 

e React Native 

e awesome-react 

e awesome-react-native 
e build with react 


Books 


e Learning React Native 
e Developing a React Edge 
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